<template>
  <div class="flowtimeline">
    <el-timeline class="timelinebox">
      <el-timeline-item v-for="(data,index) in timeLineData" :key="index" :icon="data.taskDetailViews.some(item=>item.deal == '2' ||item.deal == '6')?'el-icon-circle-close':'el-icon-circle-check'"
                        :class="data.taskDetailViews.some(item=>item.deal == '2'||item.deal == '6')?'iconerror':data.taskDetailViews.some(item=>item.deal == '3'||item.deal == '7')?'iconwarn':'iconsucess'">
        <div class="timelineline1" style="margin-bottom:8px">
          <span class="name">{{ data.activityName }}</span>
          <span class="createTime"> {{ data.createTime }} </span>
        </div>
        <div class="card">
          <div v-for="(item,ind) in data.taskDetailViews" :key="ind" class="containers">
            <div class="timelineline1">
              <p class="assigneeName">{{ item.operator }}</p>
              <p v-if="dealList && data.activityName !== '人工'" class="deal">
                <i v-if="item.deal==10||item.processStatus=='1'" />
                <i v-else-if="item.deal==1" class="el-icon-success" style="color:#67C23A;margin-right: 4px;" />
                <i v-else-if="item.deal==2||item.deal==3||item.deal==6||item.deal==7" class="el-icon-error" style="color:#F56C6C;margin-right: 4px;" />
                <i v-else class="el-icon-success" style="color:#3461FF;margin-right: 4px;" />
                <span v-if="item.deal === null" style="color: #606266;">未审批</span>
                <span v-if="!(item.deal == 1 && data.userTaskType == 2)" :style="item.deal==2||item.deal==3||item.deal==6||item.deal==7?'color:#F56C6C':item.deal==1?'color:#67C23A':item.deal==10?'color:#58B0A6':'color:#3461FF'">{{ item.deal?dealList[item.deal]:'' }}</span>
              </p>
            </div>
            <p class="message">{{ item.dealContent?item.dealContent.replace(/[，,]/g,"\n"):'' }}</p>
            <div class="timelineline1">
              <p class="duration">{{ '处理耗时：'+item.duration?item.duration:'' }}</p>
              <p> <span /><span class="endTime">{{ item.finishTime?item.finishTime:'' }}</span> </p>
            </div>
          </div>
        </div>
      </el-timeline-item>
      <el-timeline-item
        v-if="processStatus==1||processStatus==2||processStatus==4||processStatus==6"
        class="more"
        icon="el-icon-more"
      />
      <el-timeline-item
        :class="processStatus==1||processStatus==2||processStatus==4||processStatus==6?'no':'ok'"
        icon="el-icon-circle-check"
      >
        <span>完成</span>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
import dictApi from '@/framework/api/dict'

export default {
  props: {
    timeLineData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  dicts: ['deal'],
  data() {
    return {
      dealList: {},
      taskTypeList: {},
      processStatus: 1 // 1待审批  2 审批中 3完成 4退回，5终止 ，6发起
    }
  },
  created() {
    this.getdealList()
  },
  methods: {
    getdealList() {
      dictApi.fetchList('deal').then((res) => {
        this.dealList = res.data.reduce((acc, cur) => {
          acc[cur.dictCode] = cur.dictName
          return acc
        }, {})
        this.processStatus = this.timeLineData[0].taskDetailViews[0].processStatus || 6 // 获取流程状态,只有一条发起节点的时候，给tasktype=6，审批流程未完成，完成节点不能亮起
      })
    }
  }

}
</script>

<style lang="scss" scoped>

  .timelinebox{
    width: 600px;
    margin: 24px auto;
  }
  .timelineline1{
    display: flex;
    align-items: center;
    justify-content:space-between;
    height: 24px;
  }
  .name{
    font-size: 14px;
    font-weight: 500;
    color: #131414;
    line-height: 24px;
  }
  .createTime{
    font-size: 13px;
    font-weight: 300;
    color: #606266;
    line-height: 18px;
  }
  .card{
    padding: 8px 12px;
    border: 1px solid #DCDFE6;
    border-radius: 4px 4px 4px 4px;
  }
  .containers{
    border-bottom:1px dashed #DCDFE6;
    margin-bottom: 16px;
  }
  .containers:last-child{
    margin-bottom: 0px;
    border: 0px;
  }
  .assigneeName{
    font-size: 14px;
    color: #131414;
    line-height: 24px;
  }
  .deal{
    font-size: 14px;
    color: #606266;
    line-height: 24px;
  }
  .endTime{
    font-size: 12px;
    font-weight: 300;
    color: #606266;
    line-height: 20px;
  }
  .message{
    font-weight: 400;
    font-size: 14px;
    color: #131414;
    line-height: 24px;
    margin: 8px 0px 4px 0px;
    white-space: pre !important;
  }
  .duration{
    font-size: 12px;
    font-weight: 400;
    color: #909399;
    line-height: 20px;
  }
</style>
<style >
 .flowtimeline .el-timeline-item__tail{
        border-left: 1px solid #58B0A6;
  }
  .el-timeline-item__node{
    background-color:#fff;
  }
 .flowtimeline .el-timeline-item__icon{
    color: #58B0A6;
    font-size: 16px;
  }
.flowtimeline .more{
    height: 50px;
}
  .flowtimeline .more .el-timeline-item__tail{
        border-left: 1px solid #E4E7ED;
  }
  .flowtimeline .more .el-timeline-item__icon{
    color: #E4E7ED;
  }
  .flowtimeline .no span{
    color: #C0C4CC;
  }
  .flowtimeline .no .el-timeline-item__icon{
    color: #E4E7ED;
  }
  .flowtimeline .ok span,.flowtimeline .ok .el-timeline-item__icon{
    color: #58B0A6;
  }
  .flowtimeline .iconerror .el-timeline-item__icon{
    color: #F56C6C;
  }
  .flowtimeline  .iconwarn .el-timeline-item__icon{
    color: #FF8F1F;
  }
  .flowtimeline  .iconsucess .el-timeline-item__icon{
    color: #58B0A6;
  }
</style>
